3. UseEffect

useEffect is a React function used to run some code after the component renders, like fetching data or setting timers, and it helps control when that code runs, such as only once when the component loads or every time a value changes.

without dependency list useEffect runs on every render
with empty list it runs only once on first render
with values in the list it runs only when those values change

app.jsx

import { useEffect, useState } from 'react'
import './App.css'
import Client from './components/Client'

function App() {
  const [isloggedIn, setIsLoggedIn] = useState(false)
  // useEffect(()=>{
  //   alert("i run on every logged in change")
  // },[isloggedIn])
  const loginHandler = () => {
    setIsLoggedIn((!isloggedIn))
  }
  return (
    <>
      <h1>welcome</h1>
      <h2>{isloggedIn ? <Client/>:"first login in"}</h2>
      <button onClick={loginHandler}>{isloggedIn ? 'Logout':'Login'}</button>
    </>
  )
}
export default App

components/clients.jsx

import React, { useState,useEffect } from 'react'
const Client = () => {
    const [data,setdata]=useState([])
    const [loading,setloading]=useState(true)

    useEffect(()=>{
        fetch('https://jsonplaceholder.typicode.com/posts')
        .then(res=>res.json())
        .then(data=>setdata(data))
        .then(setloading(false))
    },[])
    
  return (
    <div>
        <h2>this is your data in the client</h2>

        {
            loading ? <h3>Loadinggggg</h3>
            :
            <div>
                <ul>
                    {data.map(post=>(
                        <li>{post.id}</li>
                    ))}
                </ul>
            </div>
        }        
    </div>
  )
}

export default Client

1. Passing props as children
2. State lifting
4. Context API